"""Sidebar component for the app."""

from nextpy_org import styles
from nextpy_org.state import State
import nextpy as xt


def sidebar_subitems(route: str) -> xt.Component:
    text: str = route
    path: str = xt.State.router.page.path[1:]
    active = (path.lower() == text.lower())

    return xt.link(
        xt.hstack(
            xt.text( text, color="white", font_size="14px"),
            bg=xt.cond(
                active,
                "#253975",
                "transparent",
            ),
            _hover={"bg": "#0A4075"},
            border_radius="999px",
            width="10em",
            pl="14px",
            py="6px",
        ),
        _hover={"text_decoration": "none"},
        href=f"{route}",
        width="100%",
    )


def sidebar_item(sidebar_header: list[str, list[str]]) -> xt.Component:
    return xt.vstack(
        xt.hstack(
            xt.text(
                sidebar_header[0][1:],
                color="white",
                as_="b",
                pl="14px",
                font_size="14px"
            ),
        ),
        xt.vstack(
            xt.foreach(sidebar_header[1], sidebar_subitems),
        ),
        align_items="start",
    )


def sidebar_home():
    active = (xt.State.router.page.path == "Home") | ((xt.State.router.page.path == "/"))
    route: str = State.sidebar_home
    return xt.link(
        xt.hstack(
            xt.text(
                "Home",
                color="white",
                as_="b",
                font_size="14px"
                ),
            bg=xt.cond(
                active,
                "#253975",
                "transparent",
            ),
            _hover={"bg": "#0A4075"},
            border_radius="999px",
            width="14em",
            pl="14px",
            py="8px",
        ),
        _hover={"text_decoration": "none"},
        href=f"{route}",
        width="100%",
    )


def sidebar() -> xt.Component:
    """The sidebar.

    Returns:
        The sidebar component.
    """

    return xt.box(
        xt.vstack(
            sidebar_home(),
            xt.foreach(State.sidebar_header, sidebar_item),
            spacing="2rem",
            height="100dvh",
            width="100%",
            align_items="start",
            pl="4px",
            pt="1rem",
        ),
        display=["none", "none", "block"],
        min_width="15em",
        height="calc(100dvh-55px)",
        position="sticky",
        top="55px",
        class_name="overflow-y-auto scrollbar-none hover:scrollbar-thin scrollbar-corner-[#717076] scrollbar-thumb-[#717076] scrollbar-track-[#1F1E24]",
    )
